refactor: Issues #2〜#8 コード品質改善#20
Merged
ktmage merged 19 commits intoFeb 28, 2026
Merged
Conversation
…dd new icon components and tests
…s, and session management - Implemented `useLocale` hook for managing locale settings and strings. - Created `useMessages` hook for handling chat messages and their parts. - Developed `usePermissions` hook for managing tool permission requests. - Added `useProviders` hook for managing AI model providers and their data. - Introduced `useSession` hook for managing session states and events. - Added comprehensive tests for each hook to ensure functionality and correctness. - Created `AppContext` for centralized state management across the application.
- Implemented TodoHeader component to display summary and toggle list of todos. - Created TodoView component to list individual todos with their status and priority. - Added ChatHeader component for managing chat sessions with new session and toggle actions. - Developed InputArea component for user input with file attachment and model selection features. - Introduced MessageItem and MessagesArea components for displaying chat messages and interactions. - Implemented PermissionView for handling permission requests in chat. - Added SessionList component for managing chat sessions with delete and select functionality. - Created ToolConfigPanel for configuring tool settings and managing locale options. - Developed ToolPartView for displaying tool actions and outputs, including todo management.
… TextPartView components with functionality for message handling and context management
…ageItem, MessagesArea, TextPartView) to streamline codebase
… package.json and package-lock.json
…andling in multiple components
…stent styling and improved accessibility
…sistent styling and improved functionality across multiple components
…stent styling and improved functionality in ToolConfigPanel and ModelSelector
…I consistency and functionality across various components
- Create ContextIndicator.module.css for context indicator styles - Create IconButton.module.css for icon button styles - Create LinkButton.module.css for link button styles - Create ListItem.module.css for list item styles - Create StatusItem.module.css for status item styles - Create StreamingIndicator.module.css for streaming indicator styles - Create DiffView.module.css for diff view styles - Create EmptyState.module.css for empty state styles - Create FileAttachmentBar.module.css for file attachment bar styles - Create HashFilePopup.module.css for hash file popup styles - Create ModelSelector.module.css for model selector styles - Create TodoHeader.module.css for todo header styles - Create TodoView.module.css for todo view styles - Create ChatHeader.module.css for chat header styles - Create InputArea.module.css for input area styles - Create MessageItem.module.css for message item styles - Create MessagesArea.module.css for messages area styles - Create PermissionView.module.css for permission view styles - Create SessionList.module.css for session list styles - Create ToolConfigPanel.module.css for tool config panel styles - Create ToolPartView.module.css for tool part view styles - Add css-modules.d.ts for TypeScript support of CSS modules
- Implemented MessageItem component to display user and assistant messages with editing capabilities. - Created MessagesArea component to manage and display a list of messages, including checkpoint functionality. - Added PermissionView component to handle permission requests with user actions. - Introduced ToolConfigPanel for configuring tool settings and locale preferences. - Developed ToolPartView to visualize tool actions and outputs, including support for todos and file edits. - Styled components with corresponding CSS modules for improved UI consistency. - Added SessionList component to manage and display user sessions with delete functionality.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
webview のコード品質・保守性を一括で改善する。Atomic Design による再設計、XSS 対策、i18n 修正、CSS Modules 化を実施。
Related Issue
Resolves #2, Resolves #3, Resolves #4, Resolves #5, Resolves #6, Resolves #7, Resolves #8
Changes
#2 Split InputArea.tsx responsibilities
InputArea.tsxから以下を分割抽出:FileAttachmentBar(Molecule): クリップボタン・ファイルチップ・ファイルピッカーHashFilePopup(Molecule):#トリガーのファイル選択ポップアップInputActions(Organism): ModelSelector・Terminal/Settings/Send/Abort ボタン群#3 Split ToolPartView.tsx into smaller modules
ToolPartView.tsxから以下を分割抽出:DiffView(Molecule): ファイル編集の差分表示FileCreateView(Molecule): ファイル新規作成の表示TodoView(Molecule): Todo リストの表示diff.ts,todo.ts,tool-categories.ts)をutils/に抽出#4 Split global CSS into component-scoped styles
styles.cssを CSS Modules に分割.module.cssファイルを配置し、スコープ化されたクラス名に変更styles.cssは31行(グローバルリセット +.chat-containerレイアウトのみ)に削減Component/Component.tsx+Component.module.css+index.ts)に再編#5 Add XSS protection for Markdown rendering
dompurifyパッケージを導入TextPartView.tsxでmarked.parse()の出力をDOMPurify.sanitize()で処理してからdangerouslySetInnerHTMLに渡すように変更biome-ignoreコメントの文言を「DOMPurify でサニタイズ済み」に更新#6 Consolidate inline SVG icons into shared module
IconProps型 + 名前付きコンポーネントとしてatoms/icons/icons.tsxに集約(20種以上)icons.tsxからの import に置換#7 Fix hardcoded time units in SessionList
formatRelativeTime()のハードコード英語略語(m,h,d)をロケールファイル経由に変更en.ts/ja.tsにtime.now,time.minutes,time.hours,time.daysキーを追加#8 Improve state management to reduce props drilling
AppContext+ 5つのカスタムフック(useSession,useMessages,useProviders,usePermissions,useLocale)を導入useStateをドメイン別フックに整理renderHook使用)その他
Checklist
npm run buildpassesnpm testpasses